<template>
  <div class="tab-bar">
    <menu class="menu">
      <button
        class="menu__item"
        v-for="(item, index) in tabbarList"
        :key="index"
        :class="{ active: appStore.activeIndex === index }"
        :style="{ '--bgColorItem': item.bgColor }"
        @click="clickItem(item, index)"
      >
        <!-- SVG Content -->
        <svg class="icon" viewBox="0 0 24 24">
          <path v-if="index === 0" d="M3.8,6.6h16.4" />
          <path v-if="index === 0" d="M20.2,12.1H3.8" />
          <path v-if="index === 0" d="M3.8,17.5h16.4" />

          <path
            v-if="index === 1"
            d="M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8
        C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z"
          />
          <path v-if="index === 1" d="M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6" />

          <path v-if="index === 2" d="M3.4,11.9l8.8,4.4l8.4-4.4" />
          <path v-if="index === 2" d="M3.4,16.2l8.8,4.5l8.4-4.5" />
          <path v-if="index === 2" d="M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z" />

          <path
            v-if="index === 3"
            d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1
          C3.9,4.4,4.4,3.9,5.1,3.9z"
          />
          <path v-if="index === 3" d="M4.2,9.3h15.6" />
          <path v-if="index === 3" d="M9.1,9.5v10.3" />

          <path
            v-if="index === 4"
            d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1
          C3.9,4.4,4.4,3.9,5.1,3.9z"
          />
          <path v-if="index === 4" d="M5.5,20l9.9-9.9l4.7,4.7" />
          <path
            v-if="index === 4"
            d="M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z"
          />
        </svg>
        <div class="text">{{ item.name }}</div>
      </button>
      <div class="menu__border" :style="borderStyle"></div>
    </menu>
    <div class="svg-container">
      <svg viewBox="0 0 202.9 45.5">
        <clipPath
          id="menu"
          clipPathUnits="objectBoundingBox"
          transform="scale(0.0049285362247413 0.021978021978022)"
        >
          <path
            d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7
          c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5
          c9.2,3.6,17.6,4.2,23.3,4H6.7z"
          />
        </clipPath>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "../../stores";
const route = useRoute();
const router = useRouter();
const appStore = useAppStore();

const tabbarList = [
  {
    id: 0,
    name: "首页",
    bgColor: "#ffb457",
    router: "/home",
  },
  {
    id: 1,
    name: "图书馆",
    bgColor: "#ff96bd",
    router: "/library/model",
  },
  {
    id: 2,
    name: "打卡",
    bgColor: "#9999fb",
    router: "/task",
  },
  {
    id: 3,
    name: "商城",
    bgColor: "#ffe797",
    router: "/shopping",
  },
  {
    id: 4,
    name: "我的",
    bgColor: "#cffff1",
    router: "/personage",
  },
];
const borderStyle = ref({});

// 更新滑动模块的位置
const updateBorder = () => {
  nextTick(() => {
    const menu = document.querySelector(".menu");

    const activeItem = menu.children[appStore.activeIndex];

    const offsetActiveItem = activeItem.getBoundingClientRect();

    const left =
      offsetActiveItem.left !== 0
        ? Math.floor(
            offsetActiveItem.left -
              menu.offsetLeft -
              (activeItem.offsetWidth - offsetActiveItem.width) / 2
          ) -
          34 +
          "px"
        : Math.floor(
            offsetActiveItem.left -
              menu.offsetLeft -
              (activeItem.offsetWidth - offsetActiveItem.width) / 2
          ) + "px";

    borderStyle.value = { transform: `translate3d(${left}, 0 , 0)` };
  });
};

//点击navbar的item
const clickItem = (item, index) => {
  appStore.updateActiveIndex(index);
  document.body.style.backgroundColor = tabbarList[index];

  router.replace({ path: item.router });
};

onMounted(() => {
  window.addEventListener("resize", updateBorder);
});

watch(
  () => appStore.activeIndex,
  () => {
    updateBorder();
  }
);

const routeNameToIndex = {
  home: 0,
  libraryModel: 1,
  task: 2,
  shopping: 3,
};

watch(
  () => route.name,
  () => {
    const index = routeNameToIndex[route.name] ?? 4;
    appStore.updateActiveIndex(index);
  }
);
</script>

<style scoped>
.tab-bar {
  box-sizing: border-box;
  --bgColorMenu: #78669c;
  --duration: 0.7s;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

html *,
html *::before,
html *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background-color: #ffb457;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration);
}

.menu {
  margin: 0;
  display: flex;
  width: 100%;
  font-size: 1.5em;
  padding: 0 2.85em;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: var(--bgColorMenu);
}

.menu__item {
  all: unset;
  flex-grow: 1;
  z-index: 100;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  align-items: center;
  will-change: transform;
  justify-content: center;
  padding: 0.55em 0 0.85em;
  transition: transform var(--timeOut, var(--duration));
}

.menu__item::before {
  content: "";
  z-index: -1;
  width: 4.2em;
  height: 4.2em;
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
  transition: background-color var(--duration), transform var(--duration);
}

.menu__item.active {
  transform: translate3d(0, -0.8em, 0);
}

.menu__item.active::before {
  transform: scale(1);
  background-color: var(--bgColorItem);
}

.icon {
  width: 2.6em;
  height: 2.6em;
  stroke: white;
  fill: transparent;
  stroke-width: 1pt;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
}
.text {
  color: #fff;
  font-weight: bold;
}

.menu__item.active .icon {
  animation: strok 1.5s reverse;
}

@keyframes strok {
  100% {
    stroke-dashoffset: 400;
  }
}

.menu__border {
  left: 0;
  bottom: 99%;
  width: 10.9em;
  height: 2.4em;
  position: absolute;
  clip-path: url(#menu);
  will-change: transform;
  background-color: var(--bgColorMenu);
  transition: transform var(--timeOut, var(--duration));
}

.svg-container {
  width: 0;
  height: 0;
}

@media screen and (max-width: 50em) {
  .menu {
    font-size: 0.8em;
  }
}
</style>
